<template>
  <div>
    <el-card>
      <strong>订单信息</strong>
      <el-divider></el-divider>
<!--      搜索栏-->
      <el-row type="flex" gutter="20">
        <el-col :span="6"><el-input placeholder="请输入订单号以查询订单信息" v-model="OrderId"></el-input></el-col>
        <el-col :span="18"><el-button type="primary" @click="SearchOrder">搜索</el-button></el-col>
      </el-row>
      <el-divider></el-divider>
      <el-dialog :visible.sync="dialogVisible">
        <el-descriptions title="订单明细" direction="vertical" :column="3" border>
          <el-descriptions-item label="订单号">{{ OrderForm.orderId }}</el-descriptions-item>
          <el-descriptions-item label="用户名">{{username}}</el-descriptions-item>
          <el-descriptions-item label="联系方式">{{phone }}</el-descriptions-item>
          <el-descriptions-item label="状态">{{status}}</el-descriptions-item>
          <el-descriptions-item label="金额">{{money}}￥</el-descriptions-item>
          <el-descriptions-item label="订单类型" v-if="OrderForm.dishDetailId !== null">外卖订单</el-descriptions-item>
          <el-descriptions-item label="订单类型" v-else>商品订单</el-descriptions-item>
          <el-descriptions-item label="下单时间">{{OrderForm.orderDate[0]}}-{{OrderForm.orderDate[1]}}-{{OrderForm.orderDate[2]}}</el-descriptions-item>
          <el-descriptions-item label="名称">{{ name }}</el-descriptions-item>
        </el-descriptions>
      </el-dialog>
<!--订单明细-->
      <el-card class="inner">
          <el-descriptions title="订单明细" direction="vertical" :column="3" border>
            <el-descriptions-item label="订单号">{{ OrderForm.orderId }}</el-descriptions-item>
            <el-descriptions-item label="用户名">{{username}}</el-descriptions-item>
            <el-descriptions-item label="联系方式">{{phone }}</el-descriptions-item>
            <el-descriptions-item label="状态">{{status}}</el-descriptions-item>
            <el-descriptions-item label="金额">{{money}}￥</el-descriptions-item>
            <el-descriptions-item label="订单类型" v-if="OrderForm.dishDetailId !== null">外卖订单</el-descriptions-item>
            <el-descriptions-item label="订单类型" v-else>商品订单</el-descriptions-item>
            <el-descriptions-item label="下单时间">{{OrderForm.orderDate[0]}}-{{OrderForm.orderDate[1]}}-{{OrderForm.orderDate[2]}}</el-descriptions-item>
            <el-descriptions-item label="名称">{{ name }}</el-descriptions-item>
          </el-descriptions>
          <el-pagination
            @current-change="handleCurrentChange"
            :page-size="1"
            :pager-count="7"
            layout="prev, pager, next"
            :total="queryInfo.total"
          style="margin-left: 30%;margin-top: 10px">
          </el-pagination>
      </el-card>
    </el-card>
  </div>
</template>

<script>

import {userGetOrderInfo,FindUserByAccount,serachGoodsDetailById,serachDishDetailById,
        searchDishById,searchGoodsById,searchOrderInfoById} from "@/api";

export default {
  name: "OrderContent",
  data(){
    return{
      radio1:1,
      radio2:1,
      time:new Date(),
      queryInfo:{
        pagenum:1,
        pagesize: 1,
        total:0
      },
      OrderForm:{
        orderId:'',
        account:'',
        dishDetailId:'',
        goodsDetailId:'',
        money:'',
        orderDate:[],
      },
      username:'',
      phone:'',
      status:'',
      money: '',
      name:'',
      goodsId:'',
      dishId:'',
      OrderId:'',
      dialogVisible:false
    }
  },
  mounted() {
    this.NewPage()

  },
  methods:{
    getInfo(){
      FindUserByAccount(this.OrderForm.account).then(res=>{
        this.username=res.data[0].userName
        this.phone=res.data[0].phone
      })
      if(this.OrderForm.dishDetailId===null){
        serachGoodsDetailById({
          "goodsDetailId":this.OrderForm.goodsDetailId
        }).then(res=>{
          this.status=res.data[0].status
          this.money=res.data[0].money
          this.goodsId=res.data[0].goodsId
          searchGoodsById({
            "goodsId":this.goodsId
          }).then(res=>{
            this.name=res.data.goodsName
          })
        })
      }
      else if(this.OrderForm.goodsDetailId===null){
        serachDishDetailById({
          "dishDetailId":this.OrderForm.dishDetailId
        }).then(res=>{
          this.status=res.data[0].status
          this.money=res.data[0].money
          this.dishId=res.data[0].dishId
          searchDishById({
            "dishId":this.dishId
          }).then(res=>{
            this.name=res.data.dishName
          })
        })
      }
    },
    async NewPage(){
      userGetOrderInfo({
        "pageNum":this.queryInfo.pagenum,
        "pageSize":this.queryInfo.pagesize
      }).then(res =>{
        // console.log(res.data.data[0])
        this.queryInfo.total=res.data.dataSum
        this.OrderForm=res.data.data[0]
        this.getInfo()
      })
    },
    handleCurrentChange(newPage){
      this.queryInfo.pagenum = newPage
      this.NewPage()
    },
    SearchOrder(){
      this.dialogVisible=true
      searchOrderInfoById({
        "orderId":this.OrderId
      }).then(res=>{
        this.OrderForm=res.data
        // console.log(this.OrderForm)
        this.getInfo()
      })
    }
  }
}
</script>

<style scoped>
.el-card{
  margin: 20px 100px 20px 100px
}
.el-divider{
  margin-bottom: 15px;
  margin-top: 15px;
}
.inner{
  margin: 0;
}
</style>
